<template>
    <div class="topbar-container">
        <span class="topbar-logo">
            <span>LOGO</span>
        </span>

        <span class="topbar-user-badget">
            <UserBadget />
        </span>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import UserBadget from './UserBadget.vue'
</script>

<style scoped>
.topbar-container {
    display: inline-flex;
    align-items: center;
}

.topbar-logo {
    position: absolute;
    align-items: center;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.topbar-user-badget {
    position: absolute;
    display: inline-flex;
    align-items: center;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    padding: 9x;
}
</style>